<template>
    <s-layout id="layout"  navbar="normal" :title="'班次管理'"  :autoBack="true" 
  :leftIconColor="`${headstate.color}`"  :bgColor="headstate.bgColor"  :tabbarshow='false'
  :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx',fontWeight:'600',zIndex:'99999' }" :onShareAppMessage="shareInfo" >

        <view id="app"
            :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/beijing1200webp.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="area">
                <!-- 项目栏 -->
                <view class="project"
                    :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/weitu01.png)` }">
                    <view class="chop" @tap="SelectItem">
                        <view class="spill">{{ PopupText}}</view>
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/xuanze.png`" mode="scaleToFill" />
                    </view>
                    <view class="text">
                        <view class="date">
                            <view @click="dateRange">{{ single }}</view>
                            <!-- <uni-datetime-picker type="daterange" @change="Getdate" :clear-icon="false"
                                v-model="single" /> -->
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/jiao_01.png`" mode="scaleToFill" />
                        </view>
                        <view class="all" @tap="all">
                            {{ StateShow ? StateShow : '全部班次' }}
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/jiao_02.png`" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <!-- 这里注释不要删 修版的时候使用此组件 -->
                <!-- <s-banner-region></s-banner-region> -->
                <!-- 搜索框 -->
                <view class="SearchBox">
                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/sousuo.png`" mode="scaleToFill" />
                    <input type="text" v-model="typing" :placeholder="Search_title" />
                    <view class="search" @tap="search">搜索</view>
                </view>

            </view>
            <!-- 列表综合 -->
                <view class="comprehensive">
                <view v-if="scheduleList.length !== 0">
                    <view v-for="(item, index) in scheduleList" :key="index">
                        <fui-sticky :top="`${safeAreaInsets?.top + 44}`" >
                        <view class="time" >
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff/wendang.png`" mode="scaleToFill" />
                            </view>
                            <view class="title">{{ item.date }}</view>
                        </view>
                        </fui-sticky>
                        <view class="project_List" v-for="v in item.list" :key="v.id">
                            <view class="top_List">
                                <view class="name">{{ v.title }}</view>
                                <view class="state" :style="{ color: state_arr[v['state']]['color'] }">{{state_arr[v['state']]['title']}}</view>
                            </view>
                            <view class="center">
                                <view class="center_left">班次时间：{{ v.start_time }} - {{ v.end_time }}</view>
                                <view class="center_right">查看所属需求</view>
                            </view>
                            <view class="right">
                                <view class="right_one">需：{{ v.total_num }}</view>
                                <view class="right_two">报：{{ v.apply_num }}</view>
                                <view class="right_three">打卡：{{ v.clockin_num }}</view>
                            </view>
                            <view class="placeholder"></view>
                            <view class="button_box">
                                <view v-if="v.remit_id" class="button_hollow" @click="progress_display(v)"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_icon_faxinjilu@2.png`" mode="scaleToFill" />查看进度</view>
                                <view class="button" @click="classdetail(v)">班次详情</view>
                                <view class="button_right" @tap="onShareGoods(v)" v-if="v.state == 1 || v.state == 0">分享招人</view>
                            </view>
                        </view>
                    </view>
                    <!-- 加载中 && 没有更多数据了 -->
                    <view>
                        <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                            ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                </view>
                <!-- 缺醒图 -->
                <view v-else style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
                    <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
                    <!-- 占位 -->
                    <view class="placeholde"></view>
                </view>
            </view>

        </view>

 
    <!-- 默认日历 -->
    <fui-bottom-popup :show="date_show" @close="date_close">
        <!-- :minDate="time.minDate" -->
        <fui-calendar :isMultiple="true" :value="time.intraday" :maxDays="-1" :showBtn="true" type="3" :maxDate="time.maxDate" @change="date_confirm" ></fui-calendar>
    </fui-bottom-popup>
    
    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="switchTitle" :arrayList="projectDataList" ref="popupListRef"
        :searchBoxIsShow="false" :showGoLink="'#'"></s-project-class>

    <uni-popup ref="statePopup" type="bottom" background-color="#fff" @change="change">
        <view class="popup-content">
            <view class="title">请选择状态</view>
            <view class="state" v-for="v in state_arr" :key="v" @tap="selectState(v.value, v.title)">
                {{ v.title }}
            </view>
        </view>
    </uni-popup>
</s-layout>
</template>

<script setup>
import { ref, reactive ,computed} from 'vue';
import { onLoad, onShow,onPageScroll , onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';

import { showShareModal } from '@/sheep/hooks/useModal';
const { safeAreaInsets } = uni.getSystemInfoSync();
    const time = reactive({
        minDate:'',
        maxDate:'',
        monthNum:'13',
        start_date:'',
        end_date:'',
        intraday:[]
    })
    const single = ref()
    // 设置默认日期，最大值为今天，最小值为去年今天
    let dates = new Date();
    let year = dates.getFullYear();
    let month = dates.getMonth() + 1;
    let day = dates.getDate();
    if (month <= 9) {
        month = '0' + month;
    }
    if (day <= 9) {
        day = '0' + day;
    }
    time.minDate = year + '-' + '01' + '-' + '01';
    time.maxDate = (year + 1) + '-01-01';
    time.start_date = year + '-' + month + '-' + '01';
    time.end_date = year + '-' + month + '-' +  day;
    time.intraday = [time.start_date,time.end_date]
 


    // 项目周期弹出
    const date_show = ref(false)

        // 选择完成
    const date_confirm = (e) => {
        single.value = `${e.value[0]} - ${e.value[e.value.length - 1]}`
        time.start_date = `${e.value[0]}`
        time.end_date = `${e.value[e.value.length - 1]}`
  
        scheduleList.value = [];
        listpagenumber.value = 1
        getScheduleList();
        date_show.value = false
    }
        // 关闭
    const date_close = () => {
        date_show.value = false
    }
        // 打开
    const dateRange = () => {
        date_show.value = true
    }
// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  width:''

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
    headstate.value.width = '100%'
  } else {
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
    headstate.value.width = 'calc(100% - 40rpx);'
  }
});

const Search_title = ref('搜索班次');


const title = ref('');
onLoad((options) => {
    title.value = options.title;
    PopupId.value = options.id;
    if (options.project_name == String(undefined)) {
        PopupText.value = '';
    } else {
        PopupText.value = options.project_name;
    }
    let param = {
        is_all: '0',
        is_include_main: '0',
    }
    projectList(param);
    single.value = `${ time.start_date} - ${ time.end_date}`
});
onShow(() => {
    scheduleList.value = [];
    listpagenumber.value = 1
    getScheduleList();
})
const scheduleList = ref([]);

// 搜索班次
const typing = ref('');
const search = () => {
    scheduleList.value = [];
    listpagenumber.value = 1
    getScheduleList();
};

// 全部班次逻辑
const statePopup = ref();
const all = () => {
    statePopup.value.open();
};


// 状态转译
const state_arr = ref([
    {
        value: 0,
        title: '待开始',
        color: '#0038F7',
    },
    {
        value: 1,
        title: '进行中',
        color: '#35d420',
    },
    {
        value: 2,
        title: '已结束',
        color: '#F70000',
    },
    {
        value: 3,
        title: '已终止',
        color: '#F77500',
    },
    {
        value: 4,
        title: '已作废',
        color: '#000000',
    },
]);

// 选择状态
const StateShow = ref();
const Status_paging = ref('')
const selectState = (value, title) => {
    StateShow.value = title;
    Status_paging.value = value
    scheduleList.value = [];
    listpagenumber.value = 1
    getScheduleList();
    statePopup.value.close();
};

// 获取数据

const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const getScheduleList = async () => {
    let params = {
        filter: JSON.stringify({
            title: typing.value,
            state: Status_paging.value,
            date: `${ time.start_date},${ time.end_date}`,
            department_id: PopupId.value == 'undefined' ? '' : PopupId.value
        }),
        op: JSON.stringify({
            title: 'LIKE',
            state: '=',
            date: 'in',
            department_id: '='
        }),
        page: listpagenumber.value
    };
  
    const res = await sheep.$api.project.getScheduleList(params);
    scheduleList.value = [...scheduleList.value, ...res.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
}
// 加载更多
const loadmoreRef = ref()
onReachBottom((e)=>{
  loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
        listpagenumber.value += 1;
    } else {
        return;
    }
    getScheduleList();
})
onPullDownRefresh(() => {
  listpagenumber.value = 1
  scheduleList.value = []
  getScheduleList()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 500);
})
// 切换项目

const PopupText = ref();
const PopupId = ref();
//项目选择 // 切换项目------------------------
const SelectItem = () => {
    popupListRef.value.open()
};

const popupListRef = ref()
// 调用接口：获取项目列表
const projectDataList = ref([])
const projectList = async (param = null) => {
    const res = await sheep.$api.app.getDepartment(param);
    projectDataList.value = res.data;
};
// 项目id
// 子组件触发的方法将项目title改变
const switchTitle = (data) => {
    PopupText.value = data.name
    listpagenumber.value = 1
    PopupId.value = data.id
    scheduleList.value = []
    getScheduleList();
}

//点击详情
const classdetail = (item) => {
    sheep.$router.go('/subpackage/staff/project/classes/classes_detail', {
        ids: item.id,
    });
}

// 跳转到打款详情
const progress_display = (v) => {
  sheep.$router.go('/subpackage/staff/workbench/remittance/remittance_details', {
    ids: v.remit_id,
    page:'approval'
  });
}
    // 分享招人
    const share =ref({
        title:'',
        address:'',
        date:'',
        id:'',
        employeeNeeds:''
    })
    // /移除HTML标签
    const delTag = (str) =>{
      return str.replace(/<[^>]+>/g,"");
    }
    const onShareGoods = (item) => {
        let htmlContent =  delTag(item.demand)
        share.value.title = item.title
        share.value.address = item.address
        share.value.id = item.id
        share.value.date = item.date+' ('+item.start_time+' ~ '+item.end_time +')'
        share.value.employeeNeeds = htmlContent
        showShareModal();
    }
    const shareInfo = computed(() => {
        return sheep.$platform.share.getShareInfo(
            {
                title:  share.value.title,
                desc:  share.value.address,
                params: {
                    page: '3',
                    query:share.value.id
                },
            },
            {
                type: 'clock_in', // 商品海报
                title: share.value.title,
                desc:  share.value.address,
                signUpTime: share.value.date ,
                employeeNeeds: share.value.employeeNeeds ,
            },
        );
    });
</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}

#app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

:deep(.uni-date__x-input) {
    width: 70% !important;
    padding: 0 !important;
    color: $uni-color-primary;
}

:deep(.uni-date-x--border) {
    border: none;
    width: 100%;
    padding: 0;
    color: $uni-color-primary;
}

:deep(.uni-date-x) {
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    color: $uni-color-primary !important;
}

:deep(.uni-date-editor) {
    width: 100%;
    color: $uni-color-primary;
}

.uni-date {
    width: 100%;
    color: $uni-color-primary;
}

.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;

    // 主标题
    .host_title {
        color: $uni-bg-color;
        font-size: 34rpx;
        position: relative;
        margin-top: 10rpx;

        .button {
            width: 64rpx;
            height: 64rpx;
            background-color: $uni-bg-color;
            position: absolute;
            border-radius: 50%;

            image {
                width: 40rpx;
                height: 30rpx;
                padding-left: 13rpx;
                padding-top: 18rpx;
            }
        }

        .title {
            text-align: center;
            line-height: 64rpx;
        }
    }

    // 项目
    .project {
        margin-top: 40rpx;
        background-size: 100%;
        width: 100%;
        height: 182rpx;
        background-repeat: no-repeat;
        color: $uni-text-color;
        margin-bottom: 20rpx;

        .chop {
            width: calc(100% - 40rpx);
            height: 56rpx;
            font-size: 40rpx;
            font-weight: 700;
            padding: 40rpx 0 0 40rpx;
            display: flex;
            align-items: center;
            /* 垂直居中 */

            // 项目标题超出隐藏
            .spill {
                // width: 85%;
                padding-right: 18rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            image {
                width: 26rpx;
                height: 26rpx;
                // margin-left: 10rpx;
                //   padding-top: 20rpx;
            }
        }

        .text {
            display: flex;
            width: 100%;
            align-items: center;

            .date {
                display: flex;
                height: 100%;
                max-width: 410rpx;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                padding: 12rpx 10rpx 0 40rpx;
                position: relative;

                image {
                    position: absolute;
                    right: -10rpx;
                    bottom: 30%;
                    width: 10rpx;
                    height: 10rpx;
                }
            }

            .all {
                height: 36rpx;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                padding: 12rpx 0 0 62rpx;

                image {
                    width: 10rpx;
                    height: 10rpx;
                }
            }
        }
    }

    // 搜索框
    .SearchBox {
        width: 100%;
        height: 72rpx;
        border-radius: 36rpx;
        background-color: $uni-bg-color;
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        display: flex;
        position: relative;

        image {
            width: 24rpx;
            height: 24rpx;
            padding: 24rpx 0 0 30rpx;
        }

        input {
            height: 100%;
            width: 65%;
            margin-left: 20rpx;
        }

        .search {
            position: absolute;
            right: 6rpx;
            top: 6rpx;
            width: 150rpx;
            height: 60rpx;
            border-radius: 32rpx;
            background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
            font-family: PingFangSC;
            color: #ffffff;
            font-weight: 500;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            line-height: 60rpx;
            text-align: center;
        }
    }
}

// 滚动容器
.comprehensive {
    border-radius: 16rpx;
    width: calc(100% - 40rpx);
    background-color: rgba(0, 0, 0, 0);
    margin: 0 20rpx;
    // height: 65vh;
}


.time {
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 96rpx;
    border-bottom: 1rpx solid #edecec;
    background-color: #ffffff;
    box-shadow: 0 1rpx 2rpx 0 #ebeaea;
    display: flex;

    .image {
        width: 36rpx;
        height: 36rpx;
        padding: 30rpx 20rpx 30rpx 30rpx;

        image {
            width: 36rpx;
            height: 36rpx;
        }
    }

    .title {
        color: #666666;
        height: 42rpx;
        font-size: 30rpx;
        font-weight: 500;
    }
}

.project_List {
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 1rpx 2rpx 0 #ebeaea;
    width: 100%;
    background-color: #ffffff;

    .top_List {
        display: flex;
        height: 44rpx;
        width: 100%;
        padding-top: 30rpx;
        justify-content: space-between;

        .name {
            width: 70%;
            height: 44rpx;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            margin-left: 30rpx;
        }

        .state {
            width: 72rpx;
            height: 34rpx;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-sm;
            margin-right: 30rpx;
        }
    }

    .center {
        width: 100%;
        height: 34rpx;
        display: flex;
        justify-content: space-between;
        padding-top: 22rpx;

        .center_left {
            width: 70%;
            height: 34rpx;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            margin-left: 30rpx;
        }

        .center_right {
            width: 156rpx;
            height: 36rpx;
            margin-right: 30rpx;
            color: #888888;
            font-size: 400;
           font-size:$uni-font-size-26;
        }
    }

    .right {
        width: 100%;
        height: 34rpx;
        display: flex;
        padding-top: 22rpx;
        margin-bottom: 20rpx;

        .right_one {
            margin-left: 30rpx;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
        }

        .right_two {
            margin-left: 30rpx;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
        }

        .right_three {
            margin-left: 30rpx;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
        }
    }

    .placeholder {
        width: calc(100% - 60rpx);
        height: 10%;
        border-bottom: 1px solid #f6f4f4;
        margin: 0 30rpx;
    }

    .button_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 14rpx;

        .button {
            margin-top: 20rpx;
            width: 174rpx;
            height: 60rpx;
            border-radius: 30rpx;
            border: 1rpx solid $uni-color-primary;
            line-height: 62rpx;
            text-align: center;
            color: $uni-color-primary;
            font-weight: 500;
           font-size:$uni-font-size-26;
            margin-right: 20rpx;
        }

        .button_right {
            margin-top: 20rpx;
            width: 174rpx;
            height: 62rpx;
            border-radius: 30rpx;
            background: linear-gradient(to right, $uni-color-primary, #4d8bff);
            line-height: 62rpx;
            text-align: center;
            color: #ffffff;
            font-weight: 500;
           font-size:$uni-font-size-26;
            margin-right: 20rpx;
        }
    }
}

// 弹出框 列表
.popup_box {
    width: 100%;
    height: 50%;
    background-color: $uni-bg-color;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    text-align: center;
    font-weight: 700;
    color: #000;
    font-size: 30rpx;

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
    }

    .name {
        width: 100%;
        height: 50vh;

        .list {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            background-color: $uni-bg-color;
        }

        .list_loading {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            font-weight: 400;
            color: #666;
            background-color: $uni-bg-color;
        }
    }
}

// 弹出框 状态
.popup-content {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: $uni-bg-color;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: #000;
        font-weight: 700;
    }

    .state {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: 700;
        color: #333;
        text-align: center;
    }
}

// 占位
.placeholde {
    width: 100%;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    // color: #999;
    font-weight: $uni-font-weight;
    background-color: #ffffff;
    margin-bottom: 10rpx;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
}
:deep(.fui-bottom__popup-wrap){
    z-index: 9999 !important;
}
:deep(.fui-sticky__wrap){
    z-index: 11 !important;

}

.button_hollow {
    display: flex;
    align-items: center;
    justify-content:center;
    font-family: PingFangSC;
    color: #FF6120;
    font-weight: 500;
    font-size: $uni-font-size-26;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    line-height: 62rpx;
    width: 174rpx;
    height: 62rpx;
    border: 1px solid #FF6120;
    border-radius: 32rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    image {
      align-items: center;
      width: 28rpx;
      height: 28rpx;
      margin-right: 4rpx;
    }
  }
</style>